<template>
  <view class="paper">
    <view class="paper_content">
      <template v-if="listeningObject.listeningNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ listeningObject.listeningTitle }}</text>
            <text class="text2"
              >（共{{ listeningObject.listeningNum }}题；共{{
                listeningObject.listeningScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in listeningObject.listeningList"
            :key="index"
          >
            <template v-if="item.listeningType === '1'">
              <view class="question_tips">
                <view class="question_tips_text">
                  {{ item.description }}
                </view>
                <view class="question_tips_audio">
                  <audio :src="item.audio" controls></audio>
                </view>
              </view>
              <view class="subject_box">
                <view class="question_title">
                  <view class="question_content">
                    <view
                      class="question_content_title"
                      v-if="item.content.indexOf('<img') === -1"
                    >
                      {{ item.questionNum }}.听录音，完成填空。
                    </view>
                    <view class="question_content_title" v-else>
                      {{ item.questionNum }}.
                    </view>
                    <view
                      class="question_content_box"
                      v-html="
                        handleReplaceAll(
                          handleRichText(item.content),
                          `<input type='text' data-type='1' data-index=${index} class='question_input'/>`
                        )
                      "
                    ></view>
                  </view>
                </view>
              </view>
            </template>
            <template v-if="item.listeningType === '3'">
              <view class="question_tips">
                <view class="question_tips_text">
                  {{ item.description }}
                </view>
                <view class="question_tips_audio">
                  <audio :src="item.audio" controls></audio>
                </view>
              </view>
              <view
                class="subject_box"
                v-for="(element, i) in item.items"
                :key="i"
              >
                <template v-if="element.itemType === '1'">
                  <view class="question_title">
                    <view class="question_content">
                      <view
                        class="question_content_title"
                        v-if="item.content.indexOf('<img') === -1"
                      >
                        {{ item.questionNum }}.听录音，完成填空。
                      </view>
                      <view class="question_content_title" v-else>
                        {{ item.questionNum }}.
                      </view>
                      <view
                        class="question_content_box"
                        v-html="
                          handleReplaceAll(
                            handleRichText(item.content),
                            `<input type='text' data-type='1' data-index=${index}  data-i=${i} class='question_input' />`
                          )
                        "
                      ></view>
                    </view>
                  </view>
                </template>
                <template v-else-if="element.itemType === '2'">
                  <view class="question_title">
                    <view class="question_title_content">
                      <text
                        >{{ element.questionNum }}.{{
                          element.content || "根据上述录音答题"
                        }}</text
                      >
                    </view>
                  </view>
                  <view class="question_options">
                    <u-radio-group v-model="element.userAnswer">
                      <u-radio
                        v-for="(option, key) in element.optionsList"
                        :key="key"
                        :name="option.name"
                      >
                        <view class="question_options_content">
                          <text>{{ option.name }}.</text>
                          <text>{{ option.value }}</text>
                        </view>
                      </u-radio>
                    </u-radio-group>
                  </view>
                </template>
                <template v-else-if="element.itemType === '3'">
                  <view class="question_title">
                    <view class="question_title_content">
                      <text
                        >{{ element.questionNum }}.{{
                          element.content || "根据上述录音答题"
                        }}</text
                      >
                    </view>
                  </view>
                  <view class="question_options">
                    <u-radio-group v-model="element.userAnswer">
                      <u-radio
                        v-for="(option, key) in element.optionsList"
                        :key="key"
                        :name="option.name"
                      >
                        <view class="question_options_content">
                          <text>{{ option.name }}.</text>
                          <image :src="option.value" mode="widthFix"></image>
                        </view>
                      </u-radio>
                    </u-radio-group>
                  </view>
                </template>
              </view>
            </template>
          </view>
        </view>
      </template>
      <template v-if="choiceObject.choiceNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ choiceObject.choiceTitle }}</text>
            <text class="text2"
              >（共{{ choiceObject.choiceNum }}题；共{{
                choiceObject.choiceScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in choiceObject.choiceList"
            :key="index"
          >
            <template v-if="item.choiceType === '1'">
              <view class="question_title">
                <view class="question_title_content">
                  <text>{{ item.questionNum }}、</text>
                  <text>{{ item.description }}</text>
                  <text v-html="item.content"></text>
                </view>
              </view>
              <view class="question_options">
                <u-radio-group v-model="item.userAnswer">
                  <u-radio
                    v-for="(option, i) in item.optionsList"
                    :key="i"
                    :name="option.name"
                  >
                    <view class="question_options_content">
                      <text>{{ option.name }}.</text>
                      <text>{{ option.value }}</text>
                    </view>
                  </u-radio>
                </u-radio-group>
              </view>
            </template>
            <template v-if="item.choiceType === '2'">
              <view class="question_title">
                <view class="question_title_content">
                  <text>{{ item.questionNum }}、</text>
                  <text>{{ item.description }}</text>
                  <text v-html="item.content"></text>
                  <image :src="item.image" mode="widthFix"></image>
                </view>
              </view>
              <view class="question_options">
                <u-radio-group v-model="item.userAnswer">
                  <u-radio
                    v-for="(option, i) in item.optionsList"
                    :key="i"
                    :name="option.name"
                  >
                    <view class="question_options_content">
                      <text>{{ option.name }}.</text>
                      <text>{{ option.value }}</text>
                    </view>
                  </u-radio>
                </u-radio-group>
              </view>
            </template>
            <template v-if="item.choiceType === '3'">
              <view class="question_title">
                <view class="question_title_content">
                  <text>{{ item.questionNum }}、</text>
                  <text>{{ item.description }}</text>
                  <text v-html="item.content"></text>
                </view>
              </view>
              <view class="question_options">
                <u-radio-group v-model="item.userAnswer">
                  <u-radio
                    v-for="(option, i) in item.optionsList"
                    :key="i"
                    :name="option.name"
                  >
                    <view class="question_options_content">
                      <text>{{ option.name }}.</text>
                      <image :src="option.value" mode="widthFix"></image>
                    </view>
                  </u-radio>
                </u-radio-group>
              </view>
            </template>
          </view>
        </view>
      </template>
      <template v-if="blankObject.blankNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ blankObject.blankTitle }}</text>
            <text class="text2"
              >（共{{ blankObject.blankNum }}题；共{{
                blankObject.blankScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in blankObject.blankList"
            :key="index"
          >
            <view class="question_title">
              <template v-if="item.description">
                <view class="question_title_content">
                  <text>{{ item.questionNum }}、</text>
                  <text>{{ item.description }}</text>
                </view>
                <view
                  class="question_text"
                  v-html="
                    handleReplaceAll(
                      handleRichText(item.content),
                      `<input type='text' data-type='3' data-index=${index} class='question_input'/>`
                    )
                  "
                ></view>
              </template>
              <template v-else>
                <template v-if="item.content.indexOf('<img') === -1">
                  <view class="question_title_content">
                    <text>{{ item.questionNum }}、</text>
                    <view
                      class="question_text"
                      v-html="
                        handleReplaceAll(
                          handleRichText(item.content),
                          `<input type='text' data-type='3' data-index=${index} class='question_input'/>`
                        )
                      "
                    ></view>
                  </view>
                </template>
                <template v-else>
                  <view class="question_title_content">
                    <text>{{ item.questionNum }}、</text>
                    <text>根据图文填空</text>
                  </view>
                  <view
                    class="question_text"
                    v-html="
                      handleReplaceAll(
                        handleRichText(item.content),
                        `<input type='text' data-type='3' data-index=${index} class='question_input' />`
                      )
                    "
                  ></view>
                </template>
              </template>
            </view>
          </view>
        </view>
      </template>
      <template v-if="judgeObject.judgeNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ judgeObject.judgeTitle }}</text>
            <text class="text2"
              >（共{{ judgeObject.judgeNum }}题；共{{
                judgeObject.judgeScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in judgeObject.judgeList"
            :key="index"
          >
            <view class="question_title">
              <template v-if="item.description">
                <view class="question_title_content">
                  <text>{{ item.questionNum }}、</text>
                  <text>{{ item.description }}</text>
                </view>
                <view
                  class="question_text"
                  v-html="
                    handleReplaceAll(
                      handleRichText(item.content),
                      `<input type='text' data-type='4' data-index=${index}  class='question_input'  disabled/>`
                    )
                  "
                ></view>
              </template>
              <template v-else>
                <template v-if="item.content.indexOf('<img') === -1">
                  <view class="question_title_content">
                    <text>{{ item.questionNum }}、</text>
                    <view
                      class="question_text"
                      v-html="
                        handleReplaceAll(
                          handleRichText(item.content),
                          `<input type='text' data-type='4' data-index=${index}  class='question_input'  disabled/>`
                        )
                      "
                    ></view>
                  </view>
                </template>
                <template v-else>
                  <view class="question_title_content">
                    <text>{{ item.questionNum }}、</text>
                    <text>根据图文填判断对错，正确选T，错误选F</text>
                  </view>
                  <view
                    class="question_text"
                    v-html="
                      handleReplaceAll(
                        handleRichText(item.content),
                        `<input type='text' data-type='4' data-index=${index}  class='question_input'  disabled/>`
                      )
                    "
                  ></view>
                </template>
              </template>
            </view>
            <view class="question_options">
              <u-radio-group v-model="item.userAnswer">
                <u-radio name="T">
                  <view class="question_options_content">
                    <text>T</text>
                  </view>
                </u-radio>
                <u-radio name="F">
                  <view class="question_options_content">
                    <text>F</text>
                  </view>
                </u-radio>
              </u-radio-group>
            </view>
          </view>
        </view>
      </template>
      <template v-if="clozeObject.clozeNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ clozeObject.clozeTitle }}</text>
            <text class="text2"
              >（共{{ clozeObject.clozeNum }}题；共{{
                clozeObject.clozeScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in clozeObject.clozeList"
            :key="index"
          >
            <view class="question_title">
              <view class="question_title_content">
                <text
                  >({{ (index + 1) | numberFilter }}).{{
                    item.description
                  }}</text
                >
              </view>
              <view
                class="question_text"
                v-html="
                  handleReplaceAll(
                    handleRichText(item.content),
                    `<input type='text' data-type='5' data-index=${index} class='question_input' disabled/>`
                  )
                "
              ></view>
            </view>
            <view
              class="question_options"
              v-for="(element, i) in item.items"
              :key="i"
            >
              <view class="question_options_number">
                {{ element.questionNum }}
              </view>
              <u-radio-group v-model="element.userAnswer" width="25%">
                <u-radio
                  v-for="(option, key) in element.optionsList"
                  :key="key"
                  :name="option.name"
                >
                  <view class="question_options_content">
                    <text>{{ option.name }}.</text>
                    <text>{{ option.value }}</text>
                  </view>
                </u-radio>
              </u-radio-group>
            </view>
          </view>
        </view>
      </template>
      <template v-if="taskReadingObject.taskReadingNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ taskReadingObject.taskReadingTitle }}</text>
            <text class="text2"
              >（共{{ taskReadingObject.taskReadingNum }}题；共{{
                taskReadingObject.taskReadingScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in taskReadingObject.taskReadingList"
            :key="index"
          >
            <view class="question_title">
              <view class="question_title_content">
                <text
                  >({{ (index + 1) | numberFilter }}).{{
                    item.description
                  }}</text
                >
              </view>
              <view
                class="question_text"
                v-html="
                  handleReplaceAll(
                    handleRichText(item.content),
                    `<input type='text' data-type='6' data-index=${index} class='question_input' disabled/>`
                  )
                "
              ></view>
            </view>
            <template v-if="item.items.length > 0">
              <view
                class="subject_box"
                v-for="(element, i) in item.items"
                :key="i"
              >
                <view class="question_title">
                  <view class="question_title_content">
                    <text>{{ element.questionNum }}.{{ element.content }}</text>
                  </view>
                </view>
                <view class="question_options">
                  <u-input
                    v-model="element.userAnswer"
                    type="textarea"
                    :border="true"
                    :auto-height="true"
                    placeholder="请在此输入答案"
                  />
                </view>
              </view>
            </template>
            <template v-else>
              <view class="subject_box">
                <view class="question_title">
                  <view class="question_title_content">
                    <text
                      >{{ item.questionNum }}.将短文答案填入下列答题框内</text
                    >
                  </view>
                </view>
                <view class="question_options">
                  <u-input
                    v-model="item.userAnswer"
                    type="textarea"
                    :border="true"
                    :auto-height="true"
                    placeholder="请在此输入答案,多个答案请用|隔开"
                  />
                </view>
              </view>
            </template>
          </view>
        </view>
      </template>
      <template v-if="readingComprehensionObject.readingComprehensionNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{
              readingComprehensionObject.readingComprehensionTitle
            }}</text>
            <text class="text2"
              >（共{{
                readingComprehensionObject.readingComprehensionNum
              }}题；共{{
                readingComprehensionObject.readingComprehensionScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item,
            index) in readingComprehensionObject.readingComprehensionList"
            :key="index"
          >
            <view class="question_title">
              <view class="question_title_content">
                <text
                  >({{ (index + 1) | numberFilter }}).{{
                    item.description
                  }}</text
                >
              </view>
              <view
                class="question_text"
                v-html="
                  handleReplaceAll(
                    handleRichText(item.content),
                    `<input type='text' data-type='7' data-index=${index} class='question_input' disabled/>`
                  )
                "
              ></view>
            </view>
            <view
              class="subject_box"
              v-for="(element, i) in item.items"
              :key="i"
            >
              <view class="question_title">
                <view class="question_title_content">
                  <text>{{ element.questionNum }}.{{ element.content }}</text>
                </view>
              </view>
              <view class="question_options">
                <u-radio-group v-model="element.userAnswer" width="100%">
                  <u-radio
                    v-for="(option, key) in element.optionsList"
                    :key="key"
                    :name="option.name"
                  >
                    <view class="question_options_content">
                      <text>{{ option.name }}.</text>
                      <text>{{ option.value }}</text>
                    </view>
                  </u-radio>
                </u-radio-group>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="compositionObject.compositionNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ compositionObject.compositionTitle }}</text>
            <text class="text2"
              >（共{{ compositionObject.compositionNum }}题；共{{
                compositionObject.compositionScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in compositionObject.compositionList"
            :key="index"
          >
            <view class="question_title">
              <view class="question_title_content">
                <text>{{ item.questionNum }}、</text>
                <text>{{ item.description }}</text>
              </view>
              <view
                class="question_text"
                v-html="
                  handleReplaceAll(
                    handleRichText(item.content),
                    `<input type='text' data-type='8' data-index=${index} class='question_input' disabled/>`
                  )
                "
              ></view>
            </view>
            <view class="question_textarea">
              <view class="question_textarea_content">
                <u-input
                  v-model="item.userAnswer"
                  type="textarea"
                  :border="true"
                  :auto-height="true"
                />
              </view>
            </view>
          </view>
        </view>
      </template>
      <view class="paper_button" @click="submit()"><text>交卷</text></view>
    </view>
    <view class="paper_number">
      <template v-if="listeningObject.listeningNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ listeningObject.listeningTitle }}
          </view>
          <view class="paper_number_list">
            <template v-for="(item, index) in listeningObject.listeningList">
              <template v-if="item.listeningType === '1'">
                <view
                  class="paper_number_item"
                  :class="{
                    active: item.userAnswer,
                  }"
                  :key="index"
                >
                  <text>{{ item.questionNum }}</text>
                </view>
              </template>
              <template v-if="item.listeningType === '3'">
                <view
                  class="paper_number_item"
                  v-for="(element, i) in item.items"
                  :key="item.id + i"
                  :class="{
                    active: element.userAnswer,
                  }"
                >
                  <text>{{ element.questionNum }}</text>
                </view>
              </template>
            </template>
          </view>
        </view>
      </template>
      <template v-if="choiceObject.choiceNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ choiceObject.choiceTitle }}
          </view>
          <view class="paper_number_list">
            <view
              class="paper_number_item"
              :class="{
                active: item.userAnswer,
              }"
              v-for="(item, index) in choiceObject.choiceList"
              :key="index"
            >
              <text>{{ item.questionNum }}</text>
            </view>
          </view>
        </view>
      </template>
      <template v-if="blankObject.blankNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ blankObject.blankTitle }}
          </view>
          <view class="paper_number_list">
            <view
              class="paper_number_item"
              :class="{
                active: item.userAnswer,
              }"
              v-for="(item, index) in blankObject.blankList"
              :key="index"
            >
              <text>{{ item.questionNum }}</text>
            </view>
          </view>
        </view>
      </template>
      <template v-if="judgeObject.judgeNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ judgeObject.judgeTitle }}
          </view>
          <view class="paper_number_list">
            <view
              class="paper_number_item"
              :class="{
                active: item.userAnswer,
              }"
              v-for="(item, index) in judgeObject.judgeList"
              :key="index"
            >
              <text>{{ item.questionNum }}</text>
            </view>
          </view>
        </view>
      </template>
      <template v-if="clozeObject.clozeNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ clozeObject.clozeTitle }}
          </view>
          <view class="paper_number_list">
            <template v-for="item in clozeObject.clozeList">
              <view
                class="paper_number_item"
                :class="{
                  active: element.userAnswer,
                }"
                v-for="(element, i) in item.items"
                :key="item.id + i"
              >
                <text>{{ element.questionNum }}</text>
              </view>
            </template>
          </view>
        </view>
      </template>
      <template v-if="taskReadingObject.taskReadingNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ taskReadingObject.taskReadingTitle }}
          </view>
          <view class="paper_number_list">
            <template
              v-for="(item, index) in taskReadingObject.taskReadingList"
            >
              <template v-if="item.items.length > 0">
                <view
                  class="paper_number_item"
                  :class="{
                    active: element.userAnswer,
                  }"
                  v-for="(element, i) in item.items"
                  :key="item.id + i"
                >
                  <text>{{ element.questionNum }}</text>
                </view>
              </template>
              <template v-else>
                <view
                  class="paper_number_item"
                  :class="{
                    active: item.userAnswer,
                  }"
                  :key="index"
                >
                  <text>{{ item.questionNum }}</text>
                </view>
              </template>
            </template>
          </view>
        </view>
      </template>
      <template v-if="readingComprehensionObject.readingComprehensionNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ readingComprehensionObject.readingComprehensionTitle }}
          </view>
          <view class="paper_number_list">
            <template
              v-for="item in readingComprehensionObject.readingComprehensionList"
            >
              <view
                class="paper_number_item"
                :class="{
                  active: element.userAnswer,
                }"
                v-for="(element, i) in item.items"
                :key="item.id + i"
              >
                <text>{{ element.questionNum }}</text>
              </view>
            </template>
          </view>
        </view>
      </template>
      <template v-if="compositionObject.compositionNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ compositionObject.compositionTitle }}
          </view>
          <view class="paper_number_list">
            <view
              class="paper_number_item"
              :class="{
                active: item.userAnswer,
              }"
              v-for="(item, index) in compositionObject.compositionList"
              :key="index"
            >
              <text>{{ item.questionNum }}</text>
            </view>
          </view>
        </view>
      </template>
    </view>
    <u-mask :show="isShowPopup" :zoom="false">
      <view class="popup_container">
        <view class="popup_title">你还有未做完的题目，确定交卷吗？</view>
        <view class="popup_button">
          <view class="popup_button_content" @click="isShowPopup = false">
            <view class="popup_button_icon">
              <u-icon name="arrow-left" color="#FCE38A" size="28"></u-icon>
            </view>
            <text>查看未做题</text>
          </view>
          <view class="popup_button_content" @click="confirmSubmit()">
            <text>交卷</text>
            <view class="popup_button_icon">
              <u-icon name="arrow-right" color="#FCE38A" size="28"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </u-mask>
    <view class="popup popup_background" v-if="isShowTipsPopup1">
      <view
        class="mask_container animate__animated animate__faster animate__fadeInDown"
      >
        <view class="mask_img" style="width: 160rpx">
          <image
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/wait.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="mask_text"><text>你的答题已结束</text></view>
        <view class="mask_info">
          <text class="mask_info_text1"
            >本试卷有主观题，请等待老师批阅后，在</text
          >
          <text class="mask_info_text2">“学习任务中心”</text>
          <text class="mask_info_text1">对应模块查看结果。</text>
        </view>
      </view>
    </view>
    <view class="popup popup_background" v-if="isShowTipsPopup2">
      <view
        class="mask_container animate__animated animate__faster animate__fadeInDown"
      >
        <view class="mask_img" style="width: 160rpx">
          <image
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/wait.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="mask_text"><text>你的答题已结束</text></view>
        <view class="mask_txt">
          <text
            >距离考试结束还剩{{ hourNumber }}时{{ minuteNumber }}分{{
              secondNumber
            }}秒</text
          >
        </view>
        <view class="mask_info">
          <text class="mask_info_text2">请勿关闭此页面</text>
          <text class="mask_info_text1"
            >，等待考试时间结束后显示作答结果。</text
          >
        </view>
      </view>
    </view>
    <view class="popup popup_background" v-if="isShowTestPopup1">
      <view
        class="mask_container animate__animated animate__faster animate__fadeInDown"
      >
        <view class="mask_img" style="width: 120rpx">
          <image
            v-if="score / totalScore >= 0.6"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/laugh.png"
            mode="widthFix"
          ></image>
          <image
            v-else
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cry.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="mask_score">
          <text class="mask_score_text1">{{ score }}</text
          ><text class="mask_score_text2">分</text>
        </view>
        <view class="mask_info">
          答对<text style="color: #81ddb1">{{ correctNumber }}</text
          >题,答错 <text style="color: #e90000">{{ errorNumber }}</text
          >题 | 获得 <text style="color: #fab407">{{ goldNum }}</text
          >个金币
        </view>
        <view class="mask_button">
          <view class="mask_button_content" @click="handleReport()">
            <text>查看报告</text>
          </view>
        </view>
      </view>
    </view>
    <view class="popup popup_background" v-if="isShowTestPopup2">
      <view
        class="mask_container animate__animated animate__faster animate__fadeInDown"
        style="width: 1030rpx"
      >
        <view class="mask_img" style="width: 120rpx">
          <image
            v-if="winFlag === 'Y'"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/laugh.png"
            mode="widthFix"
          ></image>
          <image
            v-else-if="winFlag === 'N'"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cry.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="mask_tips">
          <text v-if="winFlag === 'Y'">我方战胜！</text>
          <text class="active" v-else-if="winFlag === 'N'">我方战败！</text>
        </view>
        <view class="mask_info">
          你获得了 <text>{{ score }}</text
          >分（ 答对<text style="color: #81ddb1">{{ correctNumber }}</text
          >题,答错 <text style="color: #e90000">{{ errorNumber }}</text
          >题 ）| 获得 <text style="color: #fab407">{{ goldNum }}</text
          >个金币
        </view>
        <view class="mask_button">
          <view class="mask_button_content" @click="handleReport()">
            <text>查看报告</text>
          </view>
        </view>
        <view class="mask_list">
          <view class="mask_list_container">
            <view class="mask_list_title">战胜方</view>
            <view class="mask_list_content">
              <view
                class="mask_list_box"
                v-for="(item, index) in winTeam"
                :key="index"
              >
                <view class="mask_list_text">
                  <text class="mask_list_text1">{{ item.userName }}</text>
                </view>
                <u-image
                  width="50rpx"
                  height="50rpx"
                  :src="item.headImg"
                  shape="circle"
                ></u-image>
                <view class="mask_list_text" v-if="item.waiverFlag">
                  <text class="mask_list_text2">已弃权</text>
                </view>
                <view class="mask_list_text" v-else>
                  <text class="mask_list_text2">{{ item.gotScore }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="mask_list_container active">
            <view class="mask_list_title">战败方</view>
            <view class="mask_list_content">
              <view
                class="mask_list_box"
                v-for="(item, index) in loseTeam"
                :key="index"
              >
                <view class="mask_list_text">
                  <text class="mask_list_text1">{{ item.userName }}</text>
                </view>
                <u-avatar
                  :src="item.headImg"
                  img-mode="fill"
                  :size="60"
                ></u-avatar>
                <view class="mask_list_text" v-if="item.waiverFlag">
                  <text class="mask_list_text2">已弃权</text>
                </view>
                <view class="mask_list_text" v-else>
                  <text class="mask_list_text2">{{ item.gotScore }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="popup popup_background" v-if="isShowTestPopup3">
      <view
        class="mask_container animate__animated animate__faster animate__fadeInDown"
        style="width: 1030rpx"
      >
        <view class="mask_img" style="width: 120rpx">
          <image
            v-if="rank === 1"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/laugh.png"
            mode="widthFix"
          ></image>
          <image
            v-else
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cry.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="mask_tips">
          <text>第{{ rank }}名</text>
        </view>
        <view class="mask_info">
          你获得了 <text>{{ score }}</text
          >分（ 答对<text style="color: #81ddb1">{{ correctNumber }}</text
          >题,答错 <text style="color: #e90000">{{ errorNumber }}</text
          >题 ）| 获得 <text style="color: #fab407">{{ goldNum }}</text
          >个金币
        </view>
        <view class="mask_button">
          <view class="mask_button_content" @click="handleReport()">
            <text>查看报告</text>
          </view>
        </view>
        <view class="mask_team">
          <view class="mask_team_title">比赛排名</view>
          <view class="mask_team_content">
            <view
              class="mask_team_box"
              v-for="(item, index) in userList"
              :key="index"
            >
              <view class="mask_team_text">
                <text class="mask_team_text1">{{ item.userName }}</text>
              </view>
              <u-image
                width="50rpx"
                height="50rpx"
                :src="item.headImg"
                shape="circle"
              ></u-image>
              <view class="mask_team_text" v-if="item.waiverFlag">
                <text class="mask_team_text2">已弃权</text>
              </view>
              <view class="mask_team_text" v-else>
                <text class="mask_team_text2">{{ item.gotScore }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="mask mask_effect" v-if="isShowEffectPopup1">
      <view class="effect" v-if="score / totalScore >= 0.9">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/666.png"
          mode="widthFix"
        ></image>
      </view>
      <view class="effect" v-else-if="score / totalScore < 0.6">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/hard.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
    <view class="mask mask_effect" v-if="isShowEffectPopup2">
      <view class="effect" v-if="winFlag === 'Y'">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/666.png"
          mode="widthFix"
        ></image>
      </view>
      <view class="effect" v-else-if="winFlag === 'N'">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/hard.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
    <view class="mask mask_effect" v-if="isShowEffectPopup3">
      <view class="effect" v-if="rank === 1">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/666.png"
          mode="widthFix"
        ></image>
      </view>
      <view class="effect" v-if="rank === userList.length">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/hard.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
  </view>
</template>
<script>
import $ from "jquery";
export default {
  name: "PaperEvaluation",
  props: {
    paper: {
      type: Object,
      default: () => {},
    },
    totalScore: {
      type: Number,
      default: 0,
    },
  },
  filters: {
    numberFilter(number) {
      const numberMap = {
        1: "一",
        2: "二",
        3: "三",
        4: "四",
        5: "五",
        6: "六",
        7: "七",
        8: "八",
        9: "九",
        10: "十",
      };
      return numberMap[number];
    },
  },
  created() {
    this.init();
  },
  mounted() {
    this.handleInput();
  },
  data() {
    return {
      listeningObject: {},
      choiceObject: {},
      blankObject: {},
      judgeObject: {},
      clozeObject: {},
      taskReadingObject: {},
      readingComprehensionObject: {},
      compositionObject: {},
      examUserAnswer: [],
      subjectiveUserAnswer: [],
      correctNumber: 0,
      errorNumber: 0,
      hasGold: true,
      goldNum: 0,
      score: 0,
      hourNumber: "00",
      minuteNumber: "00",
      secondNumber: "00",
      isShowTipsPopup1: false,
      isShowTipsPopup2: false,
      isShowTestPopup1: false,
      isShowTestPopup2: false,
      isShowTestPopup3: false,
      isShowEffectPopup1: false,
      isShowEffectPopup2: false,
      isShowEffectPopup3: false,
      isShowPopup: false,
      winFlag: "Y",
      winTeam: [],
      loseTeam: [],
      rank: 1,
      userList: [],
    };
  },
  methods: {
    init() {
      let paper = this.paper;
      this.listeningObject = {
        listeningTitle: paper.listeningTitle,
        listeningScore: paper.listeningScore,
        listeningNum: paper.listeningNum,
        listeningUnitScore: paper.listeningUnitScore,
        listeningList: paper.listeningList,
      };
      this.handleListening();
      this.choiceObject = {
        choiceTitle: paper.choiceTitle,
        choiceScore: paper.choiceScore,
        choiceNum: paper.choiceNum,
        choiceUnitScore: paper.choiceUnitScore,
        choiceList: paper.choiceList,
      };
      this.handleChoice();
      this.blankObject = {
        blankTitle: paper.blankTitle,
        blankScore: paper.blankScore,
        blankNum: paper.blankNum,
        blankUnitScore: paper.blankUnitScore,
        blankList: paper.blankList,
      };
      this.judgeObject = {
        judgeTitle: paper.judgeTitle,
        judgeScore: paper.judgeScore,
        judgeNum: paper.judgementNum,
        judgeUnitScore: paper.judgeUnitScore,
        judgeList: paper.judgeList,
      };
      this.clozeObject = {
        clozeTitle: paper.clozeTitle,
        clozeScore: paper.clozeScore,
        clozeNum: paper.clozeNum,
        clozeUnitScore: paper.clozeUnitScore,
        clozeList: paper.clozeList,
      };
      this.handleCloze();
      this.taskReadingObject = {
        taskReadingTitle: paper.taskReadingTitle,
        taskReadingScore: paper.taskReadingScore,
        taskReadingNum: paper.taskReadingNum,
        taskReadingUnitScore: paper.taskReadingUnitScore,
        taskReadingList: paper.taskReadingList,
      };
      this.readingComprehensionObject = {
        readingComprehensionTitle: paper.readingComprehensionTitle,
        readingComprehensionScore: paper.readingComprehensionScore,
        readingComprehensionNum: paper.readingComprehensionNum,
        readingComprehensionUnitScore: paper.readingComprehensionUnitScore,
        readingComprehensionList: paper.readingComprehensionList,
      };
      this.handleReadingComprehension();
      this.compositionObject = {
        compositionTitle: paper.compositionTitle,
        compositionScore: paper.compositionScore,
        compositionNum: paper.compositionNum,
        compositionUnitScore: paper.compositionUnitScore,
        compositionList: paper.compositionList,
      };
    },
    handleListening() {
      let questionList = this.listeningObject.listeningList;
      questionList.forEach((item) => {
        item.items.forEach((element) => {
          let optionsList = [];
          if (element.optionA) {
            optionsList.push({
              name: "A",
              value: element.optionA,
            });
          }
          if (element.optionB) {
            optionsList.push({
              name: "B",
              value: element.optionB,
            });
          }
          if (element.optionC) {
            optionsList.push({
              name: "C",
              value: element.optionC,
            });
          }
          if (element.optionD) {
            optionsList.push({
              name: "D",
              value: element.optionD,
            });
          }
          if (element.optionE) {
            optionsList.push({
              name: "E",
              value: element.optionE,
            });
          }
          this.$set(element, "optionsList", optionsList);
        });
      });
    },
    handleChoice() {
      let questionList = this.choiceObject.choiceList;
      questionList.forEach((item) => {
        let optionsList = [];
        if (item.optionA) {
          optionsList.push({
            name: "A",
            value: item.optionA,
          });
        }
        if (item.optionB) {
          optionsList.push({
            name: "B",
            value: item.optionB,
          });
        }
        if (item.optionC) {
          optionsList.push({
            name: "C",
            value: item.optionC,
          });
        }
        if (item.optionD) {
          optionsList.push({
            name: "D",
            value: item.optionD,
          });
        }
        if (item.optionE) {
          optionsList.push({
            name: "E",
            value: item.optionE,
          });
        }
        this.$set(item, "optionsList", optionsList);
      });
    },
    handleCloze() {
      let questionList = this.clozeObject.clozeList;
      questionList.forEach((item) => {
        item.items.forEach((element) => {
          let optionsList = [];
          if (element.optionA) {
            optionsList.push({
              name: "A",
              value: element.optionA,
            });
          }
          if (element.optionB) {
            optionsList.push({
              name: "B",
              value: element.optionB,
            });
          }
          if (element.optionC) {
            optionsList.push({
              name: "C",
              value: element.optionC,
            });
          }
          if (element.optionD) {
            optionsList.push({
              name: "D",
              value: element.optionD,
            });
          }
          this.$set(element, "optionsList", optionsList);
        });
      });
    },
    handleReadingComprehension() {
      let questionList = this.readingComprehensionObject
        .readingComprehensionList;
      questionList.forEach((item) => {
        item.items.forEach((element) => {
          let optionsList = [];
          if (element.optionA) {
            optionsList.push({
              name: "A",
              value: element.optionA,
            });
          }
          if (element.optionB) {
            optionsList.push({
              name: "B",
              value: element.optionB,
            });
          }
          if (element.optionC) {
            optionsList.push({
              name: "C",
              value: element.optionC,
            });
          }
          if (element.optionD) {
            optionsList.push({
              name: "D",
              value: element.optionD,
            });
          }
          this.$set(element, "optionsList", optionsList);
        });
      });
    },
    submit(flag = false) {
      let examUserAnswer = [];
      let subjectiveUserAnswer = [];
      if (this.listeningObject.listeningNum > 0) {
        let list = this.listeningObject.listeningList;
        list.forEach((item) => {
          if (item.listeningType === "1") {
            examUserAnswer.push({
              correctAnswer: item.answer,
              myAnswer: item.userAnswer,
              correctFlag: item.userAnswer === item.answer ? true : false,
              gotScore:
                item.userAnswer === item.answer
                  ? this.listeningObject.listeningUnitScore
                  : 0,
              questionId: item.id,
              questionNo: item.questionNum,
              questionType: "5",
            });
          } else if (item.listeningType === "3") {
            let items = item.items;
            items.forEach((element) => {
              examUserAnswer.push({
                correctAnswer: element.answer,
                myAnswer: element.userAnswer,
                correctFlag:
                  element.userAnswer === element.answer ? true : false,
                gotScore:
                  element.userAnswer === element.answer
                    ? this.listeningObject.listeningUnitScore
                    : 0,
                itemId: element.id,
                questionId: item.id,
                questionNo: element.questionNum,
                questionType: "5",
              });
            });
          }
        });
      }
      if (this.choiceObject.choiceNum > 0) {
        let list = this.choiceObject.choiceList;
        list.forEach((item) => {
          examUserAnswer.push({
            correctAnswer: item.answer,
            myAnswer: item.userAnswer,
            correctFlag: item.userAnswer === item.answer ? true : false,
            gotScore:
              item.userAnswer === item.answer
                ? this.choiceObject.choiceUnitScore
                : 0,
            questionId: item.id,
            questionNo: item.questionNum,
            questionType: "1",
          });
        });
      }
      if (this.blankObject.blankNum > 0) {
        let list = this.blankObject.blankList;
        list.forEach((item) => {
          examUserAnswer.push({
            correctAnswer: item.answer,
            myAnswer: item.userAnswer,
            correctFlag: item.userAnswer === item.answer ? true : false,
            gotScore:
              item.userAnswer === item.answer
                ? this.blankObject.blankUnitScore
                : 0,
            questionId: item.id,
            questionNo: item.questionNum,
            questionType: "2",
          });
        });
      }
      if (this.judgeObject.judgeNum > 0) {
        let list = this.judgeObject.judgeList;
        list.forEach((item) => {
          examUserAnswer.push({
            correctAnswer: item.answer,
            myAnswer: item.userAnswer,
            correctFlag: item.userAnswer === item.answer ? true : false,
            gotScore:
              item.userAnswer === item.answer
                ? this.judgeObject.judgeUnitScore
                : 0,
            questionId: item.id,
            questionNo: item.questionNum,
            questionType: "3",
          });
        });
      }
      if (this.clozeObject.clozeNum > 0) {
        let list = this.clozeObject.clozeList;
        list.forEach((item) => {
          let items = item.items;
          items.forEach((element) => {
            examUserAnswer.push({
              correctAnswer: element.answer,
              myAnswer: element.userAnswer,
              correctFlag: element.userAnswer === element.answer ? true : false,
              gotScore:
                element.userAnswer === element.answer
                  ? this.clozeObject.clozeUnitScore
                  : 0,
              itemId: element.id,
              questionId: item.id,
              questionNo: element.questionNum,
              questionType: "6",
            });
          });
        });
      }
      if (this.taskReadingObject.taskReadingNum > 0) {
        let list = this.taskReadingObject.taskReadingList;
        list.forEach((item) => {
          if (item.items.length > 0) {
            let items = item.items;
            items.forEach((element) => {
              let anObject = {
                correctAnswer: element.answer,
                myAnswer: element.userAnswer,
                itemId: element.id,
                questionId: item.id,
                questionNo: element.questionNum,
                questionType: "4",
              };
              examUserAnswer.push(anObject);
              subjectiveUserAnswer.push(anObject);
            });
          } else {
            let anObject = {
              correctAnswer: item.answer,
              myAnswer: item.userAnswer,
              questionId: item.id,
              questionNo: item.questionNum,
              questionType: "4",
            };
            examUserAnswer.push(anObject);
            subjectiveUserAnswer.push(anObject);
          }
        });
      }
      if (this.readingComprehensionObject.readingComprehensionNum > 0) {
        let list = this.readingComprehensionObject.readingComprehensionList;
        list.forEach((item) => {
          let items = item.items;
          items.forEach((element) => {
            examUserAnswer.push({
              correctAnswer: element.answer,
              myAnswer: element.userAnswer,
              correctFlag: element.userAnswer === element.answer ? true : false,
              gotScore:
                element.userAnswer === element.answer
                  ? this.readingComprehensionObject
                      .readingComprehensionUnitScore
                  : 0,
              itemId: element.id,
              questionId: item.id,
              questionNo: element.questionNum,
              questionType: "8",
            });
          });
        });
      }
      if (this.compositionObject.compositionNum > 0) {
        let list = this.compositionObject.compositionList;
        list.forEach((item) => {
          let anObject = {
            correctAnswer: item.answer,
            myAnswer: item.userAnswer,
            questionId: item.id,
            questionNo: item.questionNum,
            questionType: "7",
          };
          examUserAnswer.push(anObject);
          subjectiveUserAnswer.push(anObject);
        });
      }
      this.examUserAnswer = examUserAnswer;
      this.subjectiveUserAnswer = subjectiveUserAnswer;
      let isNotDone = this.examUserAnswer.some((item) => {
        if (!item.myAnswer) {
          return true;
        }
      });
      if (isNotDone && !flag) {
        this.isShowPopup = true;
        return;
      }
      this.confirmSubmit();
    },
    confirmSubmit() {
      this.$emit("clearTimer");
      let score = 0;
      let correctNumber = 0;
      let errorNumber = 0;
      this.examUserAnswer.some((item) => {
        score += item.gotScore ? item.gotScore : 0;
        correctNumber += item.correctFlag === true ? 1 : 0;
        errorNumber += item.correctFlag === false ? 1 : 0;
      });
      this.score = score;
      this.correctNumber = correctNumber;
      this.errorNumber = errorNumber;
      this.$emit(
        "submit",
        this.score,
        this.examUserAnswer,
        this.subjectiveUserAnswer
      );
      this.isShowPopup = false;
    },
    showResult(gameType, flag, num) {
      if (gameType === "1") {
        this.hasGold = flag;
        this.goldNum = num;
        if (this.hasGold) {
          this.isShowEffectPopup1 = true;
          if (
            this.score / this.totalScore >= 0.9 ||
            this.score / this.totalScore < 0.6
          ) {
            setTimeout(() => {
              this.isShowTestPopup1 = true;
            }, 3000);
          } else {
            this.isShowTestPopup1 = true;
          }
        } else {
          this.isShowTipsPopup1 = true;
        }
      } else if (gameType === "2" || gameType === "3") {
        this.isShowTipsPopup2 = true;
        this.$emit("command");
      }
    },
    showTestResult1(flag, score, gold, winTeam, loseTeam) {
      this.winFlag = flag;
      this.score = score;
      this.goldNum = gold;
      this.winTeam = winTeam;
      this.loseTeam = loseTeam;
      this.isShowTipsPopup2 = false;
      this.isShowEffectPopup2 = true;
      setTimeout(() => {
        this.isShowTestPopup2 = true;
      }, 3000);
    },
    showTestResult2(rank, score, gold, userList) {
      this.rank = rank;
      this.score = score;
      this.goldNum = gold;
      this.userList = userList;
      this.isShowTipsPopup2 = false;
      this.isShowEffectPopup3 = true;
      if (this.rank === 1 || this.rank === this.userList.length) {
        setTimeout(() => {
          this.isShowTestPopup3 = true;
        }, 3000);
      } else {
        this.isShowTestPopup3 = true;
      }
    },
    handleInput() {
      let self = this;
      document.querySelectorAll(".question_input").forEach((item) => {
        item.addEventListener("input", function(e) {
          let type = e.target.dataset.type;
          let index = e.target.dataset.index;
          let dom = $(`[data-type=${type}][data-index=${index}]`);
          let arr = [];
          dom.each(function(index) {
            arr[index] = $(this).val();
          });
          if (type === "1") {
            let item = self.listeningObject.listeningList[Number(index)];
            if (item.listeningType === "1") {
              self.$set(item, "userAnswer", arr.join("|"));
            } else if (item.listeningType === "3") {
              let i = e.target.dataset.i;
              self.$set(item[Number(i)], "userAnswer", arr.join("|"));
            }
          } else if (type === "3") {
            self.$set(
              self.blankObject.blankList[Number(index)],
              "userAnswer",
              arr.join("|")
            );
          }
        });
      });
    },
    handleChangeRadio(type, index, i, value) {
      let dom = $(`[data-type=${type}][data-index=${index}]`);
      dom.each(function(key) {
        if (key === i) {
          $(this).val(value);
        }
      });
    },
    handleReport() {
      this.$emit("report");
    },
    handleCountDown(hourNumber, minuteNumber, secondNumber) {
      this.hourNumber = hourNumber;
      this.minuteNumber = minuteNumber;
      this.secondNumber = secondNumber;
    },
    handleRichText(str) {
      str = str.replace(/\s+style="[^"]*"/g, ""); //去除style样式
      str = str.replace(/<\/?text[^>]*>/gi, "");
      str = str.replace(/<\/?font[^>]*>/gi, "");
      str = str.replace(/[ | ]*\n/g, "\n");
      str = str.replace(/\n[\s| | ]*\r/g, "\n");
      str = str.replace(/&nbsp;/gi, ""); //去除&nbsp;
      return str;
    },
    handleReplaceAll(content, html) {
      return this.replaceAll(content, /_{2,}/, html);
    },
    /** 全局替换*/
    replaceAll(str, regExp, replaceStr) {
      return str.replace(new RegExp(regExp, "gm"), replaceStr);
    },
  },
};
</script>
<style scoped lang="scss">
@import "./PaperEvaluation";
</style>
